<template>
    <div class="login">
        <div class="login_header">
            <img src="../../assets/img/login/back.png" alt="" @click="goBack">
          	  登录丫贝
          	  <span><router-link :to="{path:'/register',query:{'backUrl':backUrl}}"> 注册</router-link></span>
        </div>
        <div class="login_form">
            <div class="userName">
                <input type="text" placeholder="请输入手机号" v-model.trim="loginInfo.userName"></input><img
                    src="../../assets/img/login/clear.png" alt=""  @click="clear()">
            </div>
            <div class="userName">
                <input type="password" placeholder="请输入密码" v-model.trim="loginInfo.password" />
            </div>
            
            <div class="login_bt" @click="doLogin()" :class="{active:loginInfo.password&&loginInfo.userName}">登录</div>
            <div class="forget">
                <span><router-link :to="{path:'/forget'}">忘记密码？</router-link></span>
            </div>
        </div>
        <div class="login_banner" @click="showTip()">
        	<img src="../../assets/img/login/other.png"/>
        </div>
    </div>
</template>

<style>
    @import url("./login.css");
</style>
<script>
    import API from '../../assets/js/API'
    import Validate from '../../assets/js/Validate'
    import Layer from '../../assets/js/MessageBox'

    export default {
        data() {
            return {
                loginInfo: {
                    userName: "",
                    password: "",
                },
                check_menu: 0,
                backUrl:this.$route.query.backUrl
            }
        },
        created() {
           //console.log($('.login').style.width)
             window.scrollTo(0,0);
        },
        mounted() {
          $('.login').css('height',$(window).height()+'px')
        },
        methods: {
            clear() {
              this.loginInfo.userName = ""
            },
            goBack() {
                this.$router.goBack()
            },
            checkMenu(type) {
                this.check_menu = type;
            },
            showTip(){
                // plus.oauth.getServices( function(services){//第三方登录
                //    var auths = services;
                //     console.log(JSON.stringify(auths))
                //     var s = auths[1];
                //     if ( !s.authResult ) {
                //         s.login( function(e){
                //             // 获取登录操作结果
                //             var result = e.target.authResult;
                //             console.log( "登录认证成功："+JSON.stringify(result) );
                //         }, function(e){
                //             alert( "登录认证失败！" );
                //         }, {} );
                //     }else{
                //         Layer.showMsg('您已授权登录过，可直接利用账号登录')
                //     }
                // }, function(e){
                //     alert( "获取分享服务列表失败："+e.message+" - "+e.code );
                // })
                 Layer.showMsg("敬请期待！");
            },
            doLogin() {
                if(!this.loginInfo.userName){
                    Layer.showMsg("请输入您的手机号码");
                    return
                }
                if(!this.loginInfo.password){
                    Layer.showMsg("请输入密码");
                    return
                }
                if(!Validate.phoneRule(this.loginInfo.userName)){
                    Layer.showMsg("请输入正确手机号码");
                    return
                }
                let url = API.serviceDomain + API.userLogin;
                this.$http.post(url, this.loginInfo).then(
                    (res) => {
                         if(res.body.status == '000000'){
                             Layer.showMsg("登录成功");
                             localStorage.setItem('token',res.body.data.token);
                             this.$router.push({path: this.backUrl});
                             return
                         } else {
                             Layer.showMsg(res.body.message);
                             return
                         }
                    },
                    (error) => {
                        Layer.showMsg("网络错误: 登录失败，请稍候尝试.")
                        return
                    }
                )
            }
        }
    }
</script>
